import CheckableTag from 'antd/es/tag/CheckableTag';
import { useEffect, useState } from 'react';
import { styled } from 'styled-components';
import { Ellipsis } from '../Ellipsis';

export const CheckableTagGroupLayout = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;

  .ant-tag-checkable {
    position: relative;
    /* width: calc(50% - 10px); */
    width: 100%;
    max-width: 100%;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-primary);
    border-radius: 3px;
    border: 1px solid #dae2e5;
    background-color: #fff;

    &.ant-tag-checkable-disabled {
      opacity: 0.6;
      cursor: not-allowed;
      &:hover {
        color: inherit;
      }
    }

    /**
      * 求并集
      * 1、取出最后一个2n+1项：【这里的 -n+2 选中的是是最后三项】
      * 2、取出最后一个2n+1项后面的项
      */
    /* &:nth-child(2n + 1):nth-last-child(-n + 2),
    &:nth-child(2n + 1):nth-last-child(-n + 2) ~ .ant-tag-checkable {
      margin-bottom: 0;
    } */

    .ant-tag-checkable-title {
      display: flex;
      flex: 0 0 auto;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      &-main {
      }
      &-sub {
        display: flex;
        flex: 0 0 auto;
        margin-left: 20px;
        font-weight: normal;
        color: var(--text-color-secondary);
      }
    }

    .ant-tag-checkable-close {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: -5px;
      right: -5px;
      width: 16px;
      height: 16px;
      padding: 2px;
      font-size: 12px;
      color: var(--text-color-secondary);
      border-radius: 50%;
      border: 1px solid var(--text-color-secondary);
      background: var(--white-color);
    }

    &.ant-tag-checkable-checked {
      color: var(--primary-color);
      border-color: var(--primary-color);
      background-color: #f8f9ff;

      &::after,
      &::before {
        content: '';
        position: absolute;
      }

      &::after {
        top: auto;
        bottom: 0;
        right: 0;
        z-index: 9;
        border: 10px solid var(--primary-color);
        border-top-color: transparent;
        border-left-color: transparent;
      }
      // 小勾，应该相对上面的after
      &::before {
        top: auto;
        bottom: 4px;
        right: 4px;
        z-index: 10;
        width: 4px;
        height: 8px;
        border: 1px solid var(--white-color);
        border-top-color: transparent;
        border-left-color: transparent;
        transform: rotate(45deg);
      }

      .ant-tag-checkable-title {
        &-sub {
          color: var(--primary-color);
        }
      }
    }
  }
`;

interface Props {
  /** 数据列表 */ dataList: LabelValue<any>[];
  /** 是否支持多选 */ multiple?: boolean;
  disabled?: boolean;
  selectedList?: string[];
  onChange?: (
    selectedTag: string,
    selectedTags: string[],
    selectedTagItem?: any,
  ) => void;
  onRemove?: (selectedTag: string) => void;
}

export const CheckableTagGroup: React.FC<Props> = (props) => {
  const {
    multiple,
    dataList = [],
    disabled,
    selectedList = [],
    onChange,
  } = props;

  const [dataSource, setDataSource] = useState<LabelValue[]>([]);
  const [selectedTags, setSelectedTags] = useState<string[]>([]);

  const handleChange = (tag: string, checked: boolean, tagItem?: any) => {
    const nextSelectedTags = checked
      ? multiple
        ? [...selectedTags, tag]
        : [tag]
      : selectedTags.filter((t) => t !== tag);

    setSelectedTags(nextSelectedTags);

    if (onChange) {
      onChange(tag, nextSelectedTags, tagItem);
    }
  };

  // const handleRemove = (tag: string) => {
  //   const nextSelectedTags = [...dataList].filter((t) => t.value !== tag);

  //   setDataSource(nextSelectedTags);

  //   if (onRemove) {
  //     onRemove(tag);
  //   }
  // };

  useEffect(() => {
    setDataSource(dataList);
  }, [dataList]);

  useEffect(() => {
    if (selectedList?.length > 0) {
      setSelectedTags(selectedList);
    } else {
      setSelectedTags([]);
    }
  }, [selectedList]);

  return (
    <CheckableTagGroupLayout>
      {dataSource.map((item, idx) => (
        <CheckableTag
          key={idx}
          checked={
            selectedTags?.length
              ? selectedTags?.indexOf(item.value) > -1
              : false
          }
          onChange={(checked) => {
            if (disabled) {
              return false;
            } else {
              handleChange(item.value, checked, item);
            }
          }}
          className={disabled ? 'ant-tag-checkable-disabled' : ''}>
          <div className="ant-tag-checkable-title">
            <div className="ant-tag-checkable-title-main">
              <Ellipsis text={item.label} lines={1} />
            </div>
            {item.subtitle && (
              <div className="ant-tag-checkable-title-sub">
                ({item.subtitle})
              </div>
            )}
          </div>
          {/* <div className="ant-tag-checkable-close">
            <CloseOutlined onClick={() => handleRemove(item.value)} />
          </div> */}
        </CheckableTag>
      ))}
    </CheckableTagGroupLayout>
  );
};
